<template>
    <div class="home">
        <el-container>
            <el-aside width="200px">
                <slide-bar></slide-bar>
            </el-aside>
            <el-container>
                <el-header>
                    <div></div>
                    <div class="userInfo">
                        <!-- <div style="margin-right: 20px">
                            <el-dropdown trigger="click" @command="handleSetLanguage">
                                <div class="language">
                                    <el-button style="background: #4065E0; color: #fff" size="mini" type="primary" icon="el-icon-s-help">选择语言</el-button>
                                </div>
                                <el-dropdown-menu slot="dropdown" class="international">
                                    <el-dropdown-item :disabled="language==='zh'" command="zh">
                                        中文
                                    </el-dropdown-item>
                                    <el-dropdown-item :disabled="language==='en'" command="en">
                                        English
                                    </el-dropdown-item>
                                
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div> -->
                        <div class="home-dropdown">
                            <el-dropdown :hide-on-click="false" trigger="click">
                                <span class="el-dropdown-link">
                                    {{ userName }}  <i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <img src="./shezhi.png" alt="" srcset=""> 设置
                                    </el-dropdown-item>
                                    <el-dropdown-item @click.native="logout">
                                        <img src="./tuichu.png" alt="" srcset="">退出登录
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div class="avatar">
                            <el-avatar size="large" :src="avatarUrl" fit="fill" @error="errorHandler">
                                <!-- 默认显示的头像图片 -->
                                <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"/>
                            </el-avatar>
                        </div>
                        
                    </div>
                </el-header>
                <el-main class="home-main">
                    <p>欢迎来到NNG业务运营管理平台</p>
                    <router-view></router-view>
                    <keep-alive>
                        <router-view v-if="this.$route.meta.keepAlive"></router-view>
                    </keep-alive>
                </el-main>
            </el-container>
        </el-container>
        
    </div>
</template>

<script>
import SlideBar from '@/components/base/slidebar/SlideBar'
import { mapMutations, mapGetters } from 'vuex'
import { userAvatar } from '@/api/index'
export default {
    name: 'Home',
    data() {
        return {
            avatarUrl: '',
            language: window.localStorage.getItem('lang') || 'zh'
        }
    },
    components: {
        SlideBar,
    },
    computed: {
        ...mapGetters([
            'userName',
            'userInfo'
        ]),
        
    },
    watch: {
        
    },
    methods: {
        ...mapMutations([
            'getAvatarUrl'
        ]),
        handleSetLanguage(locale){
            window.localStorage.setItem('lang', locale)
            this.$i18n.locale = locale
            this.language = locale
        },
        logout(){
            window.clearVuexAlong()
            // this.$store.commit('saveToken','')
            window.location.reload()
            this.$router.push({ name: 'Login' })
        },
        errorHandler(){
            return true
        },
        // 获取用户头像
        getUserAvatar(){
            var params = {
                userId: this.userInfo.user_id
            }
            userAvatar(params).then(res => {
                console.log(res)
                if(res.response_code == 0){
                    this.avatarUrl = res.result.avatar_url
                    this.getAvatarUrl(this.avatarUrl)
                }
                
            })
        }
    },
    created(){
        // console.log(process.env.NODE_ENV)
        // this.getUserAvatar()
    }
}
</script>

<style lang="scss" scoped>
.home{
    width: 100%;
    height: 100%;
}
.el-container{
    height: 100%;
    position: relative;
}
.el-header, .el-footer {
    // background-color: #B3C0D1;
    color: #333;
    text-align: center;
}
.el-header{
    display: flex;
    line-height: 60px;
    justify-content: space-between;
    // border-bottom: 1px dashed #333;
    box-sizing: border-box;
}
.el-footer{
    position: relative;
    height: 40px !important;
}
.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
}
.el-main {
    background-color: #E9EEF3;
    color: #333;
    position: relative;
}
.el-main p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.userInfo{
    display: flex;
    justify-content: flex-start;
    .avatar{
        margin-top: 10px;
        margin-left: 10px;
    }
}
.el-dropdown-menu__item{
    line-height: 36px;
}
.el-dropdown-menu__item img{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-top: 12px;
    margin-right: 6px;
}
.home-main{
    position: relative;
}
.el-dropdown-menu {
    padding: 0;
    top: 56px !important;
    right: 40px !important;
    width: 120px;
    margin: 0;
}
.international{
    margin-top: 10px
}
</style>

